<template>
  <!-- img必须设置不允许拖动，draggable属性，否则触发画布的onDrop事件   -->
  <div
    class="my-container"
    :style="{
                  width: detail.position.w-4 + 'px',
                  height: detail.position.h-4 + 'px',
              }"
  >
    <q-img
      :src="param.imgURL"
      :style="{
        'width': detail.position.w-4 + 'px',
        'height': detail.position.h-4 + 'px'
      }"
    >
      <div class="absolute-top text-center">
        {{param.title}}
      </div>
    </q-img>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
import { CGraphEntity, CVariableDataItem } from 'stores/editorModels';
import { CTuplePropertyItem } from './basicViewModel'
import { useMessageNotify } from 'src/hook/common/useMessageNotify';


export default defineComponent({
  name: 'ViewTupleImage',
  props: {
    detail: {
      type: Object as PropType<CGraphEntity>,
      required: true
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props) {
    //数据解构
    const {
      detail
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CTuplePropertyItem>({
      title: '',
      imgURL: '',
      borderColor: 'white',
      borderWidth: 0,
      fillColor: 'transparent'
    });


    //初始化
    const init = () => {
      //个性化属性
      if ((detail.value) && (detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        let num1;
        param.value.borderColor = detail.value.propsItem[i++].value;
        num1 = parseInt(detail.value.propsItem[i++].value);
        param.value.fillColor = detail.value.propsItem[i++].value;
        param.value.title = detail.value.propsItem[i++].value;
        param.value.imgURL = detail.value.propsItem[i++].value;
        if (!isNaN(num1)) {
          param.value.borderWidth = num1;
        } else {
          showMessage('Image 属性类型不正确！');
        }
      } else {
        showMessage('Image 属性不符！');
      }
    };

    // 监视数据变化,detail每个属性变化都能监听到
    watch(() => detail, () => {
      //发生变化时更新数据
      init();
    }, { deep: true });

    // 挂载组件
    onMounted(() => {
      init();
    });

    return {
      detail,
      param
    };
  }
});
</script>

<style lang="scss" scoped>
.my-container {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 10px;
  bottom: 10px;
  text-align: left;
}
</style>
